<template>
	<view class="content">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="加载中"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view class="all_total">
				<u-row justify="space-between" gutter="10">
					<u-col span="4">
						<view class="total-item inventory">
							<view class="total_title">
								总库存(台)
							</view>
							<view class="total">
								{{inventory}}
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="total-item provide">
							<view class="total_title">
								已拨(台)
							</view>
							<view class="total">
								{{provide}}
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="total-item noprovide">
							<view class="total_title">
								未拨(台)
							</view>
							<view class="total">
								{{noprovide}}
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="pro_list">
				<view class="items" v-for="(item, index) in data" :key="index">
					<view class="items-top">
						<view class="title">
							{{item.label}}
						</view>
						<view class="total">
							{{item.inventory}}
						</view>
					</view>
					<view class="items-bottom" @click="allrecord(item)">
						<view class="lefts">
							<text>已拨(台)</text>
						</view>
						<view class="rights">
							<u--text :text="item.provide" size="14" bold color="#303133"></u--text>
						</view>
					</view>
					<view v-if="item.provide_data" class="items-bottom-tag" @click="allrecord(item)" style="border-bottom: 1px dashed #f4f4f5;">
						<u-row justify="space-between" gutter="10">
							<u-col span="4">
								<view class="tag-item reds border-right-gray">
									<view>已激活(台)</view>
									<view class="nums">{{item.provide_data.activeNum}}</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="tag-item warns border-right-gray">
									<view>已绑定(台)</view>
									<view class="nums">{{item.provide_data.bindNum}}</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="tag-item warns border-right-gray">
									<view>库存(台)</view>
									<view class="nums">{{item.provide_data.freeNum}}</view>
								</view>
							</u-col>
						</u-row>
					</view>
					<view class="items-bottom">
						<view class="lefts">
							<text>未拨(台)</text>
						</view>
						<view class="rights">
							<u--text :text="item.noprovide" size="14" bold color="#303133"></u--text>
						</view>
					</view>
					<view v-if="item.noprovide_data" class="items-bottom-tag">
						<u-row justify="space-between" gutter="10">
							<u-col span="4">
								<view class="tag-item reds border-right-gray" @click="manages(1, item.id)">
									<view>已激活(台)</view>
									<view class="nums">{{item.noprovide_data.active}}</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="tag-item warns border-right-gray" @click="manages(5, item.id)">
									<view>已绑定(台)</view>
									<view class="nums">{{item.noprovide_data.bind}}</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="tag-item greens" @click="manages(3, item.id)">
									<view>库存(台)</view>
									<view class="nums">{{item.noprovide_data.leisure}}</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				inventory: 0,
				provide: 0,
				noprovide: 0,
				data: []
			}
		},
		onLoad() {
			this.loadAllTotal()
			this.loadData()
		},
		methods: {
			async loadAllTotal() {
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'Terminal/getAllTotal',
					header: {
						'token': userinfo.token
					},
				});
				this.inventory = res.data.inventory
				this.provide = res.data.provide
				this.noprovide = res.data.noprovide
			},
			async loadData() {
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'Terminal/getProductStocksTotal',
					header: {
						'token': userinfo.token
					},
				});
				this.loadding = false
				if (res.code == 1) {
					this.data = res.data
				}
			},
			allrecord(item) {
				// uni.navigateTo({
				// 	url: '/pages/version1/index/exchange/allrecord?type=2&tit=调拨列表&id=' + id
				// })
				uni.navigateTo({
					url: '/pages/version1/index/manage/list_detail?id=' + item.id + '&name=' + item.label
				})
			},
			manages(type, id) {
				uni.navigateTo({
					url: '/pages/version1/index/manage/manage?id=' + id + '&type=' + type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: 30rpx;

		.all_total {
			padding: 30rpx 20rpx 0 20rpx;

			.total-item {
				padding: 20rpx;
				border-radius: 10rpx;
				color: #303133;

				.total_title {
					font-size: 28rpx;
					text-align: center;
				}

				.total {
					padding-top: 20rpx;
					font-size: 36rpx;
					font-weight: bold;
					text-align: center;
				}
			}

			.inventory {
				// background-image: linear-gradient(to right, #ff8043, #fea759);
			}

			.provide {
				// background-image: linear-gradient(to right, #fe5d5c, #ff9192);
			}

			.noprovide {
				// background-image: linear-gradient(to right, #19be6b, #71d5a1);
			}
		}

		.pro_list {
			padding: 0 20rpx;

			.items {
				margin-top: 30rpx;
				font-size: 30rpx;
				background-color: #ffffff;
				box-shadow: 7px 0px 30px -18px #888888;

				.items-top {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #f4f4f5;
					font-weight: bold;

					.title {
						border-left: 8rpx solid #2f9fff;
						padding-left: 10rpx;
					}

					.total {
						color: #303133;
						font-size: 32rpx;
					}
				}

				.items-bottom {
					padding: 20rpx;
					display: flex;
					font-size: 28rpx;
					justify-content: space-between;
					border-bottom: 1px dashed #f4f4f5;
				}

				.items-bottom-tag {
					font-size: 24rpx;
					padding: 20rpx 0;

					.tag-item {
						text-align: center;
						font-weight: bold;

						.nums {
							padding-top: 10rpx;
						}
					}

					.reds {
						color: #303133;
					}

					.warns {
						color: #303133;
					}

					.greens {
						color: #303133;
					}

					.border-right-gray {
						border-right: 1px solid #f4f4f5;
					}
				}
			}
		}
	}
</style>